<template>
  <div class="infinite-container">
    <div v-if="lists.length > 0">
    <template v-for="i in lists">
      <div @click="toDailyDetail(i)" :key="i.inHospitalRecordCode">
        <mu-flexbox class="bgwhite pd10 mb10">
          <mu-flexbox-item>
            <div class="t1 f20">住院号：{{i.inHospitalRecordCode}}</div>
            <mu-divider class="mt10"/>
            <div class="mt10"><i class="t1 iconfont icon-yiyuan"></i> <span class="t3">住院科室</span> {{i.departmentName}}</div>
            <div><i class="t1 iconfont icon-ru"></i> <span class="t3">住院日期</span> {{i.inDate.slice(0,10)}}</div>
            <div><i class="t1 iconfont icon-chu"></i> <span class="t3">出院日期</span> {{i.outDate.slice(0,10)}}</div>
          </mu-flexbox-item>
        </mu-flexbox>
      </div>
    </template>
    </div>
    <div class="not-found" v-else>
      <div>暂无住院记录</div>
    </div>
  </div>
</template>

<script>
import {commonAjax, RESTFUL_API} from '@/api/api'
export default {
  data () {
    return {
      lists: [],
      familyPerson: JSON.parse(sessionStorage.familyPerson || '{}')
    }
  },
  mounted () {
    this.listHospitalizationRecord()
  },
  methods: {
    listHospitalizationRecord () {
      let param = {
        patientMedicalCardType: 1,
        patientIdentityCardType: this.familyPerson.cardtype,
        patientIdentityCardNumber: this.familyPerson.idcard
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax(`${RESTFUL_API.listHospitalizationRecord}`, param, true).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.lists = res.data.data
        }
      })
    },
    toDailyDetail (param) {
      this.$router.push({
        path: '/inpatient-care/detail-hospitalization-record',
        query: param
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/css/vars.less';
.circle {
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  color: #fff;
  &.orange {
    background: @color-price;
  }
  &.blue {
    background: @color-blue;
  }
}
</style>
